<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务看板</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f6f7;
            color: #18191c;
            padding: 16px;
            line-height: 1.5;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        header {
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e3e5e7;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        h1 {
            font-size: 20px;
            font-weight: 500;
            color: #18191c;
        }
        
        .btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            background: #2980b9;
        }
        
        .btn i {
            margin-right: 8px;
        }
        
        .board {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 16px;
        }
        
        .column {
            background: #fff;
            border-radius: 4px;
            padding: 16px;
            min-width: 280px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        .column-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e3e5e7;
        }
        
        .column-title {
            font-size: 16px;
            font-weight: 500;
            color: #18191c;
        }
        
        .task-count {
            background: #f5f7fa;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: #61666d;
        }
        
        .task-list {
            min-height: 100px;
        }
        
        .task-card {
            background: #f5f7fa;
            border-radius: 4px;
            padding: 12px;
            margin-bottom: 12px;
            cursor: grab;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .task-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .task-card.dragging {
            opacity: 0.5;
            transform: rotate(5deg);
        }
        
        .task-card.placeholder {
            background: #e3e5e7;
            border: 2px dashed #9499a0;
            height: 60px;
        }
        
        .task-title {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
            color: #18191c;
        }
        
        .task-description {
            font-size: 13px;
            color: #61666d;
            margin-bottom: 12px;
        }
        
        .task-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #9499a0;
        }
        
        .task-priority {
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
        }
        
        .priority-high {
            background: #ffebee;
            color: #e53935;
        }
        
        .priority-medium {
            background: #fff8e1;
            color: #ffb300;
        }
        
        .priority-low {
            background: #e8f5e9;
            color: #43a047;
        }
        
        .task-actions {
            position: absolute;
            top: 8px;
            right: 8px;
            display: none;
        }
        
        .task-card:hover .task-actions {
            display: flex;
        }
        
        .task-action {
            background: none;
            border: none;
            color: #9499a0;
            cursor: pointer;
            font-size: 12px;
            margin-left: 4px;
            padding: 4px;
            border-radius: 3px;
        }
        
        .task-action:hover {
            background: #e3e5e7;
            color: #18191c;
        }
        
        .add-task-form {
            margin-top: 16px;
            display: none;
        }
        
        .add-task-form.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        .form-label {
            display: block;
            font-size: 13px;
            margin-bottom: 4px;
            color: #61666d;
        }
        
        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #e3e5e7;
            border-radius: 4px;
            font-size: 13px;
        }
        
        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background: #fff;
            border-radius: 4px;
            padding: 16px;
            width: 500px;
            max-width: 90%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e3e5e7;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: 500;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: #9499a0;
        }
        
        .dropzone {
            min-height: 40px;
            border: 2px dashed #e3e5e7;
            border-radius: 4px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9499a0;
            transition: all 0.3s ease;
            font-size: 13px;
        }
        
        .dropzone.hidden {
            display: none;
        }
        
        .dropzone.active {
            border-color: #3498db;
            background: rgba(52, 152, 219, 0.05);
        }
        
        .empty-state {
            text-align: center;
            padding: 12px;
            color: #9499a0;
            font-size: 12px;
        }
        
        .empty-state i {
            font-size: 18px;
            margin-bottom: 6px;
            display: block;
        }
        
        @media (max-width: 768px) {
            .board {
                flex-direction: column;
            }
            
            .column {
                min-width: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-tasks"></i> 任务看板</h1>
            <button class="btn" id="addTaskBtn">
                <i class="fas fa-plus"></i> 添加任务
            </button>
        </header>
        
        <div class="board" id="taskBoard">
            <!-- 待处理列 -->
            <div class="column" data-status="todo">
                <div class="column-header">
                    <div class="column-title">待处理</div>
                    <div class="task-count">0</div>
                </div>
                <div class="task-list" id="todoList">
                    <div class="dropzone">拖放任务到此处</div>
                </div>
                <button class="btn" onclick="toggleAddForm('todo')">
                    <i class="fas fa-plus"></i> 添加任务
                </button>
                <div class="add-task-form" id="todoForm">
                    <div class="form-group">
                        <label class="form-label">标题</label>
                        <input type="text" class="form-input" id="todoTitle">
                    </div>
                    <div class="form-group">
                        <label class="form-label">描述</label>
                        <textarea class="form-textarea" id="todoDesc"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">优先级</label>
                        <select class="form-select" id="todoPriority">
                            <option value="low">低</option>
                            <option value="medium">中</option>
                            <option value="high">高</option>
                        </select>
                    </div>
                    <div class="form-actions">
                        <button class="btn" onclick="addTask('todo')">保存</button>
                        <button class="btn" style="background: #9499a0;" onclick="toggleAddForm('todo')">取消</button>
                    </div>
                </div>
            </div>
            
            <!-- 进行中列 -->
            <div class="column" data-status="doing">
                <div class="column-header">
                    <div class="column-title">进行中</div>
                    <div class="task-count">0</div>
                </div>
                <div class="task-list" id="doingList">
                    <div class="dropzone">拖放任务到此处</div>
                </div>
                <button class="btn" onclick="toggleAddForm('doing')">
                    <i class="fas fa-plus"></i> 添加任务
                </button>
                <div class="add-task-form" id="doingForm">
                    <div class="form-group">
                        <label class="form-label">标题</label>
                        <input type="text" class="form-input" id="doingTitle">
                    </div>
                    <div class="form-group">
                        <label class="form-label">描述</label>
                        <textarea class="form-textarea" id="doingDesc"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">优先级</label>
                        <select class="form-select" id="doingPriority">
                            <option value="low">低</option>
                            <option value="medium">中</option>
                            <option value="high">高</option>
                        </select>
                    </div>
                    <div class="form-actions">
                        <button class="btn" onclick="addTask('doing')">保存</button>
                        <button class="btn" style="background: #9499a0;" onclick="toggleAddForm('doing')">取消</button>
                    </div>
                </div>
            </div>
            
            <!-- 已完成列 -->
            <div class="column" data-status="done">
                <div class="column-header">
                    <div class="column-title">已完成</div>
                    <div class="task-count">0</div>
                </div>
                <div class="task-list" id="doneList">
                    <div class="dropzone">拖放任务到此处</div>
                </div>
                <button class="btn" onclick="toggleAddForm('done')">
                    <i class="fas fa-plus"></i> 添加任务
                </button>
                <div class="add-task-form" id="doneForm">
                    <div class="form-group">
                        <label class="form-label">标题</label>
                        <input type="text" class="form-input" id="doneTitle">
                    </div>
                    <div class="form-group">
                        <label class="form-label">描述</label>
                        <textarea class="form-textarea" id="doneDesc"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">优先级</label>
                        <select class="form-select" id="donePriority">
                            <option value="low">低</option>
                            <option value="medium">中</option>
                            <option value="high">高</option>
                        </select>
                    </div>
                    <div class="form-actions">
                        <button class="btn" onclick="addTask('done')">保存</button>
                        <button class="btn" style="background: #9499a0;" onclick="toggleAddForm('done')">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 编辑任务模态框 -->
    <div class="modal" id="editModal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">编辑任务</div>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="form-group">
                <label class="form-label">标题</label>
                <input type="text" class="form-input" id="editTitle">
            </div>
            <div class="form-group">
                <label class="form-label">描述</label>
                <textarea class="form-textarea" id="editDesc"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">优先级</label>
                <select class="form-select" id="editPriority">
                    <option value="low">低</option>
                    <option value="medium">中</option>
                    <option value="high">高</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">状态</label>
                <select class="form-select" id="editStatus">
                    <option value="todo">待处理</option>
                    <option value="doing">进行中</option>
                    <option value="done">已完成</option>
                </select>
            </div>
            <div class="form-actions">
                <button class="btn" onclick="saveTask()">保存</button>
                <button class="btn" style="background: #9499a0;" onclick="closeModal()">取消</button>
            </div>
        </div>
    </div>

    <script>
        // 任务数据
        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        let currentEditId = null;
        let draggedTask = null;
        
        // 初始化看板
        function initBoard() {
            renderTasks();
            setupDragAndDrop();
        }
        
        // 渲染任务
        function renderTasks() {
            // 清空所有列
            document.getElementById('todoList').innerHTML = '<div class="dropzone">拖放任务到此处</div>';
            document.getElementById('doingList').innerHTML = '<div class="dropzone">拖放任务到此处</div>';
            document.getElementById('doneList').innerHTML = '<div class="dropzone">拖放任务到此处</div>';
            
            // 更新任务计数
            document.querySelectorAll('.column').forEach(column => {
                const status = column.dataset.status;
                const count = tasks.filter(task => task.status === status).length;
                column.querySelector('.task-count').textContent = count;
            });
            
            // 渲染任务卡片
            tasks.forEach(task => {
                const taskElement = createTaskElement(task);
                document.getElementById(`${task.status}List`).appendChild(taskElement);
            });
            
            // 检查空状态并更新拖放区域显示
            document.querySelectorAll('.column').forEach(column => {
                const status = column.dataset.status;
                const list = document.getElementById(`${status}List`);
                const dropzone = list.querySelector('.dropzone');
                
                // 如果当前列有任务，隐藏拖放区域
                if (tasks.filter(task => task.status === status).length > 0) {
                    dropzone.classList.add('hidden');
                    
                    // 移除空状态提示（如果存在）
                    const emptyState = list.querySelector('.empty-state');
                    if (emptyState) {
                        emptyState.remove();
                    }
                } else {
                    dropzone.classList.remove('hidden');
                    
                    // 添加空状态提示（如果不存在）
                    if (!list.querySelector('.empty-state')) {
                        const emptyState = document.createElement('div');
                        emptyState.className = 'empty-state';
                        emptyState.innerHTML = '<i class="fas fa-clipboard-list"></i><p>暂无任务</p>';
                        list.appendChild(emptyState);
                    }
                }
            });
            
            // 重新设置拖放事件
            setupDragAndDrop();
        }
        
        // 创建任务元素
        function createTaskElement(task) {
            const taskElement = document.createElement('div');
            taskElement.className = 'task-card';
            taskElement.draggable = true;
            taskElement.dataset.id = task.id;
            
            const priorityClass = `priority-${task.priority}`;
            const priorityText = {
                'high': '高',
                'medium': '中',
                'low': '低'
            }[task.priority];
            
            taskElement.innerHTML = `
                <div class="task-title">${task.title}</div>
                <div class="task-description">${task.description}</div>
                <div class="task-meta">
                    <div class="task-priority ${priorityClass}">${priorityText}</div>
                    <div>${new Date(task.createdAt).toLocaleDateString()}</div>
                </div>
                <div class="task-actions">
                    <button class="task-action" onclick="editTask('${task.id}')"><i class="fas fa-edit"></i></button>
                    <button class="task-action" onclick="deleteTaskDirect('${task.id}')"><i class="fas fa-trash"></i></button>
                </div>
            `;
            
            return taskElement;
        }
        
        // 设置拖放功能
        function setupDragAndDrop() {
            const taskCards = document.querySelectorAll('.task-card');
            const dropzones = document.querySelectorAll('.task-list');
            
            taskCards.forEach(card => {
                card.addEventListener('dragstart', dragStart);
                card.addEventListener('dragend', dragEnd);
                card.addEventListener('dragover', dragOverSameColumn);
                card.addEventListener('dragenter', dragEnterSameColumn);
                card.addEventListener('dragleave', dragLeaveSameColumn);
                card.addEventListener('drop', dropSameColumn);
            });
            
            dropzones.forEach(zone => {
                zone.addEventListener('dragover', dragOver);
                zone.addEventListener('dragenter', dragEnter);
                zone.addEventListener('dragleave', dragLeave);
                zone.addEventListener('drop', drop);
            });
        }
        
        // 同列内拖放相关函数
        function dragOverSameColumn(e) {
            e.preventDefault();
        }
        
        function dragEnterSameColumn(e) {
            e.preventDefault();
            if (e.target.classList.contains('task-card')) {
                e.target.classList.add('placeholder');
            }
        }
        
        function dragLeaveSameColumn(e) {
            if (e.target.classList.contains('task-card')) {
                e.target.classList.remove('placeholder');
            }
        }
        
        function dropSameColumn(e) {
            e.preventDefault();
            if (e.target.classList.contains('task-card')) {
                e.target.classList.remove('placeholder');
                
                // 获取拖动的任务和目标任务
                const draggedId = draggedTask.dataset.id;
                const targetId = e.target.dataset.id;
                
                // 获取任务状态（列）
                const status = e.target.closest('.column').dataset.status;
                
                // 重新排序任务
                reorderTasks(draggedId, targetId, status);
                
                // 重新渲染
                renderTasks();
            }
        }
        
        // 重新排序任务
        function reorderTasks(draggedId, targetId, status) {
            // 获取当前状态的所有任务
            const statusTasks = tasks.filter(task => task.status === status);
            
            // 找到拖动任务和目标任务的索引
            const draggedIndex = statusTasks.findIndex(task => task.id === draggedId);
            const targetIndex = statusTasks.findIndex(task => task.id === targetId);
            
            if (draggedIndex !== -1 && targetIndex !== -1) {
                // 从原数组中移除拖动任务
                const [draggedTask] = statusTasks.splice(draggedIndex, 1);
                
                // 插入到目标位置
                statusTasks.splice(targetIndex, 0, draggedTask);
                
                // 更新主任务数组
                tasks = tasks.filter(task => task.status !== status).concat(statusTasks);
                
                // 保存到本地存储
                saveTasks();
            }
        }
        
        // 跨列拖放相关函数
        function dragStart(e) {
            draggedTask = e.target;
            e.dataTransfer.setData('text/plain', e.target.dataset.id);
            setTimeout(() => {
                e.target.classList.add('dragging');
            }, 0);
        }
        
        function dragEnd(e) {
            e.target.classList.remove('dragging');
            draggedTask = null;
            
            // 移除所有占位符样式
            document.querySelectorAll('.task-card.placeholder').forEach(card => {
                card.classList.remove('placeholder');
            });
        }
        
        function dragOver(e) {
            e.preventDefault();
        }
        
        function dragEnter(e) {
            e.preventDefault();
            if (e.target.classList.contains('dropzone') || e.target.classList.contains('task-list')) {
                e.target.classList.add('active');
            }
        }
        
        function dragLeave(e) {
            if (e.target.classList.contains('dropzone') || e.target.classList.contains('task-list')) {
                e.target.classList.remove('active');
            }
        }
        
        function drop(e) {
            e.preventDefault();
            const id = e.dataTransfer.getData('text/plain');
            
            // 找到最近的task-list或dropzone
            let dropTarget = e.target;
            while (dropTarget && !dropTarget.classList.contains('task-list') && !dropTarget.classList.contains('dropzone')) {
                dropTarget = dropTarget.parentElement;
            }
            
            if (dropTarget) {
                dropTarget.classList.remove('active');
                
                // 获取状态（从父列）
                const column = dropTarget.closest('.column');
                const newStatus = column.dataset.status;
                
                // 更新任务状态
                const taskIndex = tasks.findIndex(task => task.id === id);
                if (taskIndex !== -1) {
                    tasks[taskIndex].status = newStatus;
                    saveTasks();
                    renderTasks();
                }
            }
        }
        
        // 切换添加任务表单
        function toggleAddForm(status) {
            const form = document.getElementById(`${status}Form`);
            const isActive = form.classList.contains('active');
            
            // 隐藏所有表单
            document.querySelectorAll('.add-task-form').forEach(f => {
                f.classList.remove('active');
            });
            
            // 切换当前表单
            if (!isActive) {
                form.classList.add('active');
            }
        }
        
        // 添加任务
        function addTask(status) {
            const titleInput = document.getElementById(`${status}Title`);
            const descInput = document.getElementById(`${status}Desc`);
            const prioritySelect = document.getElementById(`${status}Priority`);
            
            const title = titleInput.value.trim();
            const description = descInput.value.trim();
            const priority = prioritySelect.value;
            
            if (!title) {
                alert('请输入任务标题');
                return;
            }
            
            const newTask = {
                id: Date.now().toString(),
                title,
                description,
                priority,
                status,
                createdAt: new Date()
            };
            
            tasks.push(newTask);
            saveTasks();
            
            // 重置表单
            titleInput.value = '';
            descInput.value = '';
            prioritySelect.value = 'low';
            
            // 隐藏表单并重新渲染
            toggleAddForm(status);
            renderTasks();
        }
        
        // 编辑任务
        function editTask(id) {
            const task = tasks.find(t => t.id === id);
            if (!task) return;
            
            currentEditId = id;
            document.getElementById('editTitle').value = task.title;
            document.getElementById('editDesc').value = task.description;
            document.getElementById('editPriority').value = task.priority;
            document.getElementById('editStatus').value = task.status;
            
            document.getElementById('editModal').classList.add('active');
        }
        
        // 直接删除任务
        function deleteTaskDirect(id) {
            if (confirm('确定要删除这个任务吗？')) {
                tasks = tasks.filter(t => t.id !== id);
                saveTasks();
                renderTasks();
            }
        }
        
        // 保存任务
        function saveTask() {
            if (!currentEditId) return;
            
            const taskIndex = tasks.findIndex(t => t.id === currentEditId);
            if (taskIndex === -1) return;
            
            tasks[taskIndex].title = document.getElementById('editTitle').value;
            tasks[taskIndex].description = document.getElementById('editDesc').value;
            tasks[taskIndex].priority = document.getElementById('editPriority').value;
            tasks[taskIndex].status = document.getElementById('editStatus').value;
            
            saveTasks();
            renderTasks();
            closeModal();
        }
        
        // 关闭模态框
        function closeModal() {
            document.getElementById('editModal').classList.remove('active');
            currentEditId = null;
        }
        
        // 保存任务到本地存储
        function saveTasks() {
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            initBoard();
            
            // 添加任务按钮事件
            document.getElementById('addTaskBtn').addEventListener('click', function() {
                toggleAddForm('todo');
            });
        });
    </script>
</body>
</html>